<template>
  <div class="frontend">
    <div class="bg">
      <el-carousel height="520px" :interval="5000">
        <el-carousel-item v-for="item in bgList" :key="item.id">
          <img :src="item.img" alt="背景">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="container">
      <div class="content">
      <el-row :gutter="24">
        <!-- 文章列表渲染 -->
        <el-col :span="18"><div class="list white">
          <ul>
            <li v-for="items in dataList" :key="items.id">
              <el-row :gutter="20">
                <!-- 图片渲染 -->
                <el-col :span="8" class="listbg">
                  <img :src="items.img" alt="图片">
                </el-col>
                <!-- 内容渲染 -->
                <el-col :span="14" class="content_list">
                  <h3><router-link style="color: #111;" :to="{ name: 'posts', params: { userId: items.id || 0 }}">
                  <el-link style="font-size: 22px">{{items.title}}</el-link>
                  </router-link></h3>
                  <p style="font-size: 14px;">{{items.des}}</p>
                </el-col>
              </el-row>
              <div class="timer"  style="font-size: 13px;"><span>{{items.times | dateFilter}} </span>  <span style="margin-left:20px;">作者： Daes</span></div>
            </li>
          </ul>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSize"
            @current-change="handleCurrent"
            :page-sizes="[3, 6, 9, 21]"
            :current-page="pageList.pagenum"
            :page-size="pageList.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="margin-bottom: 20px;"
            >
          </el-pagination>
        </div></el-col>
        <!-- 排行榜 -->
        <el-col :span="6"><div class="pages white">
          <h4><i class="iconfont icon-yanjing"></i>推荐阅读</h4>
          <ul>
            <li v-for="item  in goodList" :key="item.id">
              <router-link :to="{ name: 'posts', params: { userId: item.id || 0 }}">
                <el-link> {{item.title}}</el-link>
              </router-link>
              <p><span>{{item.times | dateFilter}}</span></p>
            </li>
          </ul>
        </div></el-col>
      </el-row>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import Footer from '@/components/footer/Footer'
export default {
  data () {
    return {
      // 轮播图
      bgList: [
        { id: 0, img: '//s1.ax1x.com/2020/05/24/YzrUXj.jpg' }
      ],
      // 文章分页
      pageList: {
        pagenum: 0,
        pagesize: 3
      },
      // 文章列表
      dataList: [],
      // 总条数
      total: 0,
      // 推荐文章列表
      goodList: []
    }
  },
  created () {
    this.getList()
    this.handleGood()
  },
  methods: {
    // 获取文章列表
    async getList () {
      var { data: res } = await this.$http.get('/more', {
        params: this.pageList
      })
      if (res.meta.status !== 200) return this.$message.error('获取失败')
      this.dataList = res.data.mores
      this.total = res.data.totalpage
    },
    handleScoll () {
      var s = document.documentElement.scrollTop
      var pages = document.querySelector('.pages')
      if (s > 150) {
        pages.style.position = 'fixed'
        pages.style.top = '65px'
      }
      if (s < 240) {
        pages.style.position = 'static'
      }
    },
    // 每页显示个数选择器
    handleSize (val) {
      this.pageList.pagesize = val
      this.getList()
    },
    // 选择当前页
    handleCurrent (val) {
      this.pageList.pagenum = val
      this.getList()
    },
    // 请求推荐文章
    async handleGood () {
      var { data: res } = await this.$http.get('/more', {
        params: {
          pagenum: 0,
          pagesize: 6
        }
      })
      if (res.meta.status !== 200) return this.$message.error('获取失败')
      this.goodList = res.data.mores
    }
  },
  mounted () {
    // 监听滚动事件
    document.addEventListener('scroll', this.handleScoll)
  },
  beforeDestroy () {
    document.removeEventListener('scroll', this.handleScoll)
  },
  components: {
    Footer
  }
}
</script>

<style lang="less" scoped>
.frontend{
  height: 100%;
  width: 100%;
}
.bg{
  height: 38%;
  width: 100%;
  position: relative;
  z-index: -1;
  img{
    width: 100%;
  }
}
.container{
  width: 100%;
  background: #eaeaea;
}
.content{
  margin: 0 auto;
  height: 100%;
  max-width: 1200px;
  color: #111;
  .list{
    background: #eaeaea;
    li{
      margin: 20px 0;
      min-height: 200px;
      width: 100%;
      background: #fff;
      overflow: hidden;
      position: relative;
    }
    .timer{
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
  }
}
li{
  list-style: none;
}
.listbg{
  padding-top: 20px;
  img{
    width: 200px;
  }
}
.content_list{
  h3, p{
    margin-top: 20px;
  }
}
.el-row{
  margin: 0 !important;
  padding: 0 !important;
}
.pages{
  margin-top: 20px;
  min-height: 530px;
  min-width: 18%;
  h4{
    padding: 17px 5px;
    font-weight: 200;
    font-size: 20px;
    color: #409EFF;
  }
  li{
    height: 80px;
    border-bottom: 1px #777 dashed;
    a{
      margin: 10px 0 0 10px;
    }
    p{
      margin-top: 20px;
      padding-right: 10px;
      text-align: right;
      font-size: 12px;
    }
  }
}

 @media screen and (min-width:0px) and (max-width:750px)  {
  .el-col-18{
    width: 100%;
    margin: 0 auto !important;
    display: block;
  }
  .el-col-6{
    display: none;
  }
  li img{
    width: 150px !important;
  }
}

</style>
